<script setup lang="ts">
import { ref, reactive } from 'vue'

// 基础表单
const username = ref('')
const password = ref('')

const handleBasicSubmit = () => {
  console.log('基础表单提交:', { username: username.value, password: password.value })
}

// 复杂表单
const form = reactive({
  name: '',
  email: '',
  age: 0,
  gender: '',
  interests: [] as string[],
  subscribe: false,
  comments: ''
})

const handleSubmit = () => {
  console.log('表单提交:', form)
}

// 表单验证
const errors = reactive({
  name: '',
  email: '',
  age: ''
})

const validateForm = () => {
  let isValid = true
  
  // 姓名验证
  if (!form.name) {
    errors.name = '姓名不能为空'
    isValid = false
  } else {
    errors.name = ''
  }
  
  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!form.email) {
    errors.email = '邮箱不能为空'
    isValid = false
  } else if (!emailRegex.test(form.email)) {
    errors.email = '邮箱格式不正确'
    isValid = false
  } else {
    errors.email = ''
  }
  
  // 年龄验证
  if (form.age < 18 || form.age > 100) {
    errors.age = '年龄必须在18-100之间'
    isValid = false
  } else {
    errors.age = ''
  }
  
  return isValid
}

const handleValidatedSubmit = () => {
  if (validateForm()) {
    console.log('验证通过，提交表单:', form)
  } else {
    console.log('表单验证失败')
  }
}
</script>

<template>
  <div class="form-demo">
    <h2>表单处理示例</h2>

    <section>
      <h3>1. 基础表单</h3>
      <form @submit.prevent="handleBasicSubmit">
        <div class="form-item">
          <label>用户名：</label>
          <input v-model="username" type="text" required>
        </div>
        <div class="form-item">
          <label>密码：</label>
          <input v-model="password" type="password" required>
        </div>
        <button type="submit">提交</button>
      </form>
    </section>

    <section>
      <h3>2. 复杂表单</h3>
      <form @submit.prevent="handleSubmit">
        <div class="form-item">
          <label>姓名：</label>
          <input v-model="form.name" type="text">
        </div>
        
        <div class="form-item">
          <label>邮箱：</label>
          <input v-model="form.email" type="email">
        </div>
        
        <div class="form-item">
          <label>年龄：</label>
          <input v-model.number="form.age" type="number">
        </div>
        
        <div class="form-item">
          <label>性别：</label>
          <select v-model="form.gender">
            <option value="">请选择</option>
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        
        <div class="form-item">
          <label>兴趣爱好：</label>
          <label>
            <input type="checkbox" v-model="form.interests" value="reading">
            阅读
          </label>
          <label>
            <input type="checkbox" v-model="form.interests" value="sports">
            运动
          </label>
          <label>
            <input type="checkbox" v-model="form.interests" value="coding">
            编程
          </label>
        </div>
        
        <div class="form-item">
          <label>
            <input type="checkbox" v-model="form.subscribe">
            订阅新闻
          </label>
        </div>
        
        <div class="form-item">
          <label>备注：</label>
          <textarea v-model="form.comments"></textarea>
        </div>
        
        <button type="submit">提交</button>
      </form>
    </section>

    <section>
      <h3>3. 表单验证</h3>
      <form @submit.prevent="handleValidatedSubmit">
        <div class="form-item">
          <label>姓名：</label>
          <input v-model="form.name" type="text">
          <span class="error">{{ errors.name }}</span>
        </div>
        
        <div class="form-item">
          <label>邮箱：</label>
          <input v-model="form.email" type="email">
          <span class="error">{{ errors.email }}</span>
        </div>
        
        <div class="form-item">
          <label>年龄：</label>
          <input v-model.number="form.age" type="number">
          <span class="error">{{ errors.age }}</span>
        </div>
        
        <button type="submit">验证并提交</button>
      </form>
    </section>
  </div>
</template>

<style scoped>
.form-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-item {
  margin: 10px 0;
}

label {
  display: inline-block;
  min-width: 80px;
  margin-right: 10px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  padding: 5px;
  width: 200px;
}

textarea {
  height: 100px;
}

.error {
  color: red;
  font-size: 0.8em;
  margin-left: 10px;
}

button {
  margin-top: 10px;
  padding: 5px 15px;
}
</style> 